﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
	<el-row :gutter="20">
		<el-col :span="12" :offset="6">
			<el-form ref="productForm" :model="productForm" enctype="multipart/form-data" label-width="80px">
				<h1 align="center">编辑商品资料</h1>
				<el-form-item label="商品名称">
					<el-input v-model="productForm.name" placeholder="请填入商品名称"></el-input>
				</el-form-item>

				<el-form-item label="商品类型">
					<el-select v-model="productForm.typeId" placeholder="请选择商品类型">
						<el-option
								v-for="item in pType"
								:key="item.pid"
								:label="item.typename"
								:value="item.pid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="详细信息">
					<el-input type="textarea" v-model="productForm.detail"></el-input>
				</el-form-item>

				<el-form-item label="上传图片">
					<el-upload
							class="upload-demo"
							action="/product/createProduct"
							:on-preview="handlePreview"
							:on-remove="handleRemove"
							:file-list="fileList"
							:on-change="onchange"
							:auto-upload="false"
							accept=".jpg,.png,.jpeg"
							name="file"
							list-type="picture">
						<el-button size="small"  type="info">选择文件</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2000kb</div>
					</el-upload>
				</el-form-item>

				<el-form-item>
					<el-button @click="submitUpload" type="primary">提交</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>

</div>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			productForm:{
				name:'',
				typeId:'',
				detail:'',
				imageUrl:[]
			},
			pType:[],
			fileList:[],
		},
		methods: {
			initType(){
				$.get("/pType/selectAllType",function (data){
					app.pType=data;
				})
			},
			initInfo(){
				$.get("/product/selectProductInfo",function (data){
					app.productForm.name=data.name;
					app.productForm.typeId=data.typeId;
					app.productForm.detail=data.detail;

				})
			},
			submitUpload(){
				console.log(this.productForm.imageUrl)
				let format = new FormData();
				format.append("name",this.productForm.name)
				format.append("typeId",this.productForm.typeId)
				format.append("detail",this.productForm.detail)
				this.productForm.imageUrl.forEach(file => {
					format.append("imageUrl",file.raw)
				})
				$.ajax({
					url:'/product/createProduct',
					type:'post',
					data:format,
					processData: false, // 告诉jQuery不要去处理发送的数据
					contentType: false, // 告诉jQuery不要去设置Content-Type请求头
					success:function (data){
						alert(data)
					}
				})
				// $.post("/product/createProduct",format,function (data){
				// 	app.$alert(data)
				// })

			},
			onchange(file,fileList){
				this.productForm.imageUrl.push(file)
				// let formData = new FormData()
				// fileList.forEach(file => {
				// 	formData.append('files', file.raw)
				// })
				// this.imageUrl = formData;
			},
			handlePreview(){},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
		},
		created(){
			this.initType();
			this.initInfo();
		}
	});
</script>
</body>
</html>
